<template>
  <div class="reserveInfo">
	<PageContainer title="完善预约信息" back noTab>
		<div class="form">
			<div class="form-item">
				<div class="label">您的姓名</div>
				<u-input v-model="formData.name" placeholder="请输入您的姓名" border="bottom" clearable fontSize="14px" :customStyle="customStyle"></u-input>
			</div>
			<div class="form-item">
				<div class="label">手机号码</div>
				<u-input v-model="formData.phone" placeholder="请输入手机号码" border="bottom" clearable fontSize="14px" :customStyle="customStyle"></u-input>
			</div>
			<div class="form-item">
				<div class="label">预约到店日期</div>
				<div class="time-overlay" @click="showTime">
					<u-input v-model="formData.preTime" placeholder="选择服务日期" border="bottom" fontSize="14px" :customStyle="customStyle" readonly></u-input>
				</div>
			</div>
			<div class="form-item">
				<div class="label">
					您的身高，体重
					<div class="sub-label">(我们将提前为您准备试穿尺码衣)</div>
				</div>
				<u-input v-model="formData.heightAndWeight" placeholder="请输入身高(厘米)，体重(千克)" border="bottom" clearable fontSize="14px" :customStyle="customStyle"></u-input>
			</div>
			<!-- <div class="form-item">
				<div class="label">体重(千克)</div>
				<u-input v-model="formData.weight" placeholder="请输入体重(千克)" border="bottom" clearable fontSize="14px" :customStyle="customStyle"></u-input>
			</div>
			<div class="form-item">
				<div class="label">鞋码</div>
				<u-input v-model="formData.shoeSize" placeholder="请输入鞋码" border="bottom" clearable fontSize="14px" :customStyle="customStyle"></u-input>
			</div> -->
			<div class="form-item">
				<div class="label">到店人数</div>
				<u-input v-model="formData.preCount" placeholder="请输入到店人数" border="bottom" clearable fontSize="14px" :customStyle="customStyle"></u-input>
			</div>
			<div class="form-item">
				<div class="label">意向试穿风格（多选）</div>
				<u-checkbox-group
					v-model="formData.style"
					activeColor="#282828"
					placement="row"
					size="15px">
					<div class="checkbox-list">
						<div class="checkbox-item" v-for="(item, index) in list" :key="index">
							<u-checkbox
								:customStyle="{marginRight: '8px'}"
								:label="item.label"
								:name="item.name"
								:labelSize="`14px`">
							</u-checkbox>
							<u-image :src="item.img" :width="toPx(334)" :height="toPx(512)" ></u-image>
						</div>
					</div>
				</u-checkbox-group>
			</div>

			<u-button :customStyle="customButtonStyle" :text="query.preId ? '修改' : '提交'" @click="submit"></u-button>
		</div>
	</PageContainer>
	
	<u-datetime-picker
		ref="datetimePicker"
		v-model="timeView"
		:show="show"
		mode="datetime"
		@cancel="cancel"
		@confirm="confirm"
	></u-datetime-picker>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import TabBar from '@/components/TabBar/index.vue'
import PageContainer from '@/components/PageContainer/index.vue'
import { useSystemInfo } from '@/hooks/useSystemInfo';
import {useRouter} from '@/hooks/useRouter';
import { addActiveList, getUserPreById, editorUserPre } from '@/api'
import { useToast } from '@/hooks/useToast'
import { useTime } from '@/hooks/useTime'

const { getSafeTop } = useSystemInfo();
const { getPageQuery, back } = useRouter();
const { formatTime } = useTime()
const toast = useToast()

const datetimePicker: any = ref(null);
const query: any = ref({})
const show = ref(false)
const timeView = ref(new Date())

const customStyle = ref({
	padding: '6px 0'
})

const toPx = (value: number) => uni.upx2px(value)

const customButtonStyle = {
	color: '#fff',
	width: '100%',
	background: '#282828',
	marginTop: '24px'
}

const showDatetimePicker = ref(false)

defineProps({});

let formData: any = ref({
	relateId: '',
	name: '',
	phone: '',
	preTime: '',
	heightAndWeight: '',
	// height: '',
	// weight: '',
	// shoeSize: '',
	preCount: '',
	style: [],
})

const list = ref([
	{
		label: '中式套装',
		name: '中式套装',
		img: 'http://xishifile.oss-cn-hangzhou.aliyuncs.com/202308/12/zstf.jpg'
	},
	{
		label: '新娘旗袍',
		name: '新娘旗袍',
		img: 'http://xishifile.oss-cn-hangzhou.aliyuncs.com/202308/12/xnqp.jpg'
	},
	{
		label: '中式礼服',
		name: '中式礼服',
		img: 'http://xishifile.oss-cn-hangzhou.aliyuncs.com/202308/12/zslf.jpg'
	},
	{
		label: '西式礼服',
		name: '西式礼服',
		img: 'http://xishifile.oss-cn-hangzhou.aliyuncs.com/202308/12/xslf.jpg'
	},
])

const showTime = () => {
	show.value = true
}

const cancel = () => {
	show.value = false
}

const confirm = (time: any) => {
	show.value = false
	formData.value.preTime = formatTime(time.value)
}

const submit = async () => {
	const { name, phone, preTime, height, heightAndWeight, weight, shoeSize, preCount, style } = formData.value
	if (!name) {
		toast.error('请输入您的姓名')
		return
	}
	if (!phone) {
		toast.error('请输入您的手机号码')
		return
	}
	if (!preTime) {
		toast.error('请输入服务日期')
		return
	}
	if (!heightAndWeight) {
		toast.error('请输入身高，体重')
		return
	}
	// if (!weight) {
	// 	toast.error('请输入体重')
	// 	return
	// }
	// if (!shoeSize) {
	// 	toast.error('请输入鞋码')
	// 	return
	// }
	if (!preCount) {
		toast.error('请输入到店人数')
		return
	}
	if (!style) {
		toast.error('请选择意向试穿风格')
		return
	}
	formData.value.relateId = query.value.activeId
	formData.value.type = query.value.type || 1
	formData.value.style = formData.value.style.join(',')
	if (query.value.preId) {
		await editorUserPre(formData.value)
		toast.info('修改成功')
	} else {
		await addActiveList(formData.value)
		toast.info('预约成功')
	}

	setTimeout(() => {
		back()
	}, 1600);
}

const getDetail = async () => {
	toast.loading()
	try {
		const res: any = await getUserPreById({ id: query.value.preId })
		const data = {
			id: res.id,
			relateId: res.relateId,
			name: res.name,
			phone: res.phone,
			preTime: res.preTime,
			heightAndWeight: res.heightAndWeight,
			// height: res.height,
			// weight: res.weight,
			// shoeSize: res.shoeSize,
			preCount: res.preCount,
			style: res.style.split(','),
		}

		formData.value = data
		console.log('获取到详情', formData.value)
	} finally {
		toast.hideLoading()
	}
}

onMounted(() => {
	query.value = getPageQuery()
	if (query.value.preId) {
		getDetail()
	}
})

</script>

<style lang="less" scoped>
.reserveInfo {
	.form {
		padding: 16px 16px;
		.form-item {
			position: relative;
			&:not(:last-child) {
				margin-bottom: 16px;
			}

			.label {
				font-size: 16px;
				font-weight: 400;
				color: #151A1D;
				line-height: 24px;
				margin-bottom: 4px;
				.sub-label {
					display: inline;
					font-size: 12px;
					color: #c1c1c1;
				}
			}

			.checkbox-list {
				width: 100%;
				display: grid;
				grid-column-gap: 8px;
				grid-template-columns: repeat(2, 50%);
				grid-row-gap: 8px;
  				grid-template-rows: repeat(2, 282px);
				.checkbox-item {
					display: inline-block;
				}
			}
		}
	}
}
</style>
